<template>
    <div class="learning-platform">
        <mt-header fixed
                   title="学习平台">
            <router-link to="/mine"
                         slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        <div class="platform-body clear">
            <div @click="goWay(item)" v-for="(item, index) in dataList" :key='index' class="learning-platform-item" style="margin-top:45px;">
                <img src="../assets/image/icon_folder.png">
                <div class="platform-body-title">{{item.name}}</div>
            </div>
        </div>
    </div>
</template>
<script>
    import app from '~/assets/api/config';
    export default {
        data() {
            return {
                dataList: [],
            }
        },
        created() {
            this.getLearnData();
        },
        methods: {
            getLearnData(){
                this.$axios.get(`${app.API_BES_URL}/api/backend/v1/study/file_documents`).then(res => {
                    if (res.data.code == 0) {
                        this.dataList = res.data.data
                    }
                })
            },
            goWay(item) {
                // console.log(item.id+','+item.name);
                this.$router.push({ name: 'datumDetail', query: { id: item.id, name: item.name } })
            }
        }

    }
</script>
<style lang='less' scoped>
    .learning-platform {
        min-height: 131px;
        .platform-body {
            padding: 36px;
            height: 100%;
            .learning-platform-item {
                float: left;
                background-color: #fff;
                text-align: center;
                width: 320px;
                height: 295px;
                margin-top: 35.75px;
                border-radius: 6.25px;
                &:nth-child(2n) {
                    margin-left: 36px;
                }
                &:nth-of-type(1),
                &:nth-of-type(2) {
                    margin-top: 0;
                }
                img {
                    width: 85px;
                    height: 74px;
                    margin-bottom: 40px;
                    margin-top: 75px;
                }
                .platform-body-title {
                    margin: 0 auto;
                    width: 250px;
                    color: #2b2b2b;
                    text-align: center;
                    font-size: 34px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    display: box;
                    /* autoprefixer: off */
                    -webkit-box-orient: vertical;
                    /* autoprefixer: on */
                    -webkit-line-clamp: 2;
                }
            }
        }
    }
</style>
<style>
html,body{
    background: #f8f8f9;
}
.mint-header .mintui {
    font-size: 0.45rem;
}
.mint-header {
    font-size: 0.45rem !important;
    height: 1.173333rem !important;
    background: #fff !important;
    color: #2e2e2e !important;
    border-bottom: 0.016667rem solid #f8f8f8 !important;
    line-height:1;
}
.mint-header-title {
    font-size: 0.426667rem !important;
}
.mint-header .mintui {
    font-size: 0.45rem;
}
</style>

